<template>
  <el-row>
    <el-col :span="2" style="vertical-align: center">服务器地址：</el-col>
    <el-col :span="10"><el-input v-model="serverUrl"></el-input></el-col>
    <el-col :span="1"></el-col>
    <el-col :span="2"><el-button plain type="primary" @click="saveHtml">保存文档</el-button></el-col>
    <el-col :span="2"> <el-button plain type="primary" @click="saveHtmlAndData">保存数据&文档</el-button></el-col>
  </el-row>
  <Source src="/code/SaveDoc.vue"></Source>
  <Editor @load="onLoad" doc="https://www.x-emr.cn/doc/999.html" style="margin: 10px 0"></Editor>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      editor: null,
      //服务端地址
      serverUrl: 'http://localhost/post'
    }
  },
  methods: {
    //初始化
    onLoad: function (e) {
      this.editor = e.target.contentWindow.editor
    },
    //仅保存HTML文档
    saveHtml: function () {
      // 若文档未修改，则无需保存
      if (this.editor.edited == false) {
        this.$message.error('文档未修改，无需保存')
        return
      }

      // 若文档校验不通过，则无法保存
      if (this.editor.validate() == false) {
        this.$message.error('请查看文档是否有未填项或不合规内容')
        return
      }

      let data = { 'doc': this.editor.getHtml() }
      axios.post(this.serverUrl, data).then(res => {
        this.$message.success('保存成功')
      })
    },
    //保存文档及机构化数据
    saveHtmlAndData: function () {
      // 若文档未修改，则无需保存
      if (this.editor.edited == false) {
        this.$message.error('文档未修改，无需保存')
        return
      }

      // 若文档校验不通过，则无法保存
      if (this.editor.validate() == false) {
        this.$message.error('请查看文档是否有未填项或不合规内容')
        return
      }

      let data = {
        'doc': this.editor.getHtml(),
        'data': this.editor.getBindObject()
      }
      axios.post(this.serverUrl, data).then(res => {
        this.$message.success('保存成功')
      })
    }
  }
}
</script>
